<template>
    <div class="box">
        <el-button-group>
            <el-button :type="activeName=='list' ? 'primary': ''" @click="activeName='list'">分类列表</el-button>
            <el-button :type="activeName=='add' ? 'primary': ''" @click="activeName='add'">添加分类</el-button>
        </el-button-group>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
            <div v-if="activeName=='list'">
                <el-table :data="menuList" stripe>
                    <el-table-column label="编号" type="index" width="100px"></el-table-column>
                    <el-table-column label="ID" prop="id"></el-table-column>
                    <el-table-column label="名称" prop="catename"></el-table-column>
                    <el-table-column label="文章数量" prop="num"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                circle
                                @click="edit(scope.row)"
                            ></el-button>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                circle
                                @click="del(scope.row.id)"
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    layout="total, sizes, prev, pager, next"
                    :total="menuTotal"
                    :page-sizes="[10,20,30]"
                    @current-change="pageChange"
                    @size-change="sizeChange"
                ></el-pagination>
            </div>

            <div v-else>
                <p>
                    分类名称
                    <el-input v-model="catename" placeholder size="normal"></el-input>
                </p>

                <p>
                    <el-button type="danger" size="default" @click="addSubmit">立即创建</el-button>
                    <el-button size="default">取消</el-button>
                </p>
            </div>
        </el-card>

        <!-- 弹框 -->
        <el-dialog title="修改分类信息" :visible.sync="dialogShow" width="40%" @close="close">
            <p>
                分类名称
                <el-input v-model="catename" placeholder size="normal"></el-input>
            </p>

            <span slot="footer">
                <el-button @click="dialogShow = false">取消</el-button>
                <el-button type="primary" @click="editSubmit">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
    data() {
        return {
            activeName: "list",

            catename: "",
            dialogShow: false,
            cateId: "",
        };
    },
    computed: {
        ...mapState(["menuList", "menuInfo", "menuTotal"]),
    },
    methods: {
        ...mapActions(["getMenuList"]),
        ...mapMutations(["setMenuInfo"]),
        // 页码发生变化
        pageChange(val) {
            this.setMenuInfo({
                act: "getlist",
                start: val,
                pagesize: 10,
            });
            this.getMenuList();
        },
        // 每页数量变化
        sizeChange(val) {
            this.setMenuInfo({
                act: "getlist",
                start: 1,
                pagesize: val,
            });
            this.getMenuList();
        },
        // 添加提交
        async addSubmit() {
            let { data: res } = await this.$axios.post("api/menu", {
                act: "add",
                catename: this.catename,
            });
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("添加成功");
            this.getMenuList();
            this.activeName = "list";
            this.catename = "";
        },
        // 删除
        async del(id) {
            try {
                await this.$confirm("您确定要删除此分类吗?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                });
                let { data: res } = await this.$axios.get("api/menu", {
                    params: {
                        id: id,
                        act: "del",
                    },
                });

                if (res.code !== 200) return this.$message.error(res.msg);
                if (this.menuInfo.start !== 1 && this.menuList.length == 1) {
                    this.setMenuInfo({
                        act: "getlist",
                        start: this.menuInfo.start--,
                        pagesize: this.menuInfo.pagesize,
                    });
                }
                this.getMenuList();
            } catch (error) {
                this.$message.error("取消删除");
            }
        },
        // 点击编辑事件
        edit(row) {
            console.log(row);
            this.dialogShow = true;
            this.catename = row.catename;
            this.cateId = row.id;
        },
        // 编辑提交事件
        async editSubmit() {
            let { data: res } = await this.$axios.post("api/menu", {
                act: "edit",
                catename: this.catename,
                id: this.cateId,
            });
            if (res.code !== 200) return this.$message.error(res.msg);
            this.$message.success("修改成功");
            this.getMenuList();
            this.dialogShow = false;
        },
        // 弹框关闭
        close() {
            this.catename = "";
        },
    },
    mounted() {
        this.menuList.length || this.getMenuList();
    },
};
</script>
<style scoped lang='less'>
.el-input {
    width: 620px;
    height: 35px;
    display: inline-block;
    margin-bottom: 30px;
}
.box {
    text-align: left;
}
.el-card {
    margin-top: 20px;
    text-align: center;
}
</style>
